<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<header th:replace="admin/header::header-fragment"></header>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
    <!-- 引入页面头header-fragment -->
    <div th:replace="admin/header::header-nav"></div>
    <!-- 引入工具栏sidebar-fragment -->
    <div th:replace="admin/sidebar::sidebar-fragment(${path})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
            </div><!-- /.container-fluid -->
        </div>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-6">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">基本信息</h3>
                            </div> <!-- /.card-body -->
                            <div class="card-body">
                                <form role="form" id="userNameForm">
                                    <div class="form-group col-sm-8">
                                        <div class="alert alert-danger" id="updateUserName-info"
                                             style="display: none;"></div>
                                    </div>
                                    <!-- text input -->
                                    <div class="form-group">
                                        <label>登陆名称</label>
                                        <input type="text" class="form-control" id="loginUserName"
                                               name="loginUserName"
                                               placeholder="请输入登陆名称" required="required">
                                    </div>
                                    <div class="form-group">
                                        <label>昵称</label>
                                        <input type="text" class="form-control" id="nickName"
                                               name="nickName"
                                               placeholder="请输入昵称" required="required">
                                    </div>
                                    <div class="card-footer">
                                        <button type="button" id="updateUserNameButton" onsubmit="return false;"
                                                class="btn btn-danger float-right" onclick="updateUserName()">
                                            确认修改
                                        </button>
                                    </div>
                                </form>
                            </div><!-- /.card-body -->
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card card-primary card-outline">
                            <div class="card-header">
                                <h3 class="card-title">修改密码</h3>
                            </div> <!-- /.card-body -->
                            <div class="card-body">
                                <form role="form" id="userPasswordForm">
                                    <div class="form-group col-sm-8">
                                        <div class="alert alert-danger updatePassword-info" id="updatePassword-info"
                                             style="display: none;"></div>
                                    </div>
                                    <!-- input states -->
                                    <div class="form-group">
                                        <label class="control-label"><i class="fa fa-key"></i> 原密码</label>
                                        <input type="text" class="form-control" id="originalPassword"
                                               name="originalPassword"
                                               placeholder="请输入原密码" required="true">
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label"><i class="fa fa-key"></i> 新密码</label>
                                        <input type="text" class="form-control" id="newPassword" name="newPassword"
                                               placeholder="请输入新密码" required="true">
                                    </div>
                                    <div class="card-footer">
                                        <button type="button" id="updatePasswordButton" onsubmit="return false;"
                                                class="btn btn-danger float-right" onclick="updatePassword()">确认修改
                                        </button>
                                    </div>
                                </form>
                            </div><!-- /.card-body -->
                        </div>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <!-- 引入页脚footer-fragment -->
    <div th:replace="admin/footer::footer-fragment"></div>
</div>
<script th:src="@{/admin/dist/js/jquery/jquery-3.5.1.min.js}"></script>
<script th:src="@{/admin/dist/plugins/sweetalert/sweetalert.min.js}"></script>
<!-- AdminLTE App -->
<script src="/admin/dist/js/adminlte.min.js"></script>
<script src="/admin/dist/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>

<script>
    $(function () {
        $.ajax({
            url: "/admin/profile",
            type: "get",
            success: function (data) {
                console.info(data);
                if (data.code === 1000) {
                    $("#loginUserName").val(data.data.username);
                    $("#nickName").val(data.data.nickName);
                } else {
                    swal("异常");
                }
            }
        });
    });

    function updateUserName() {
        let username = $("#loginUserName").val();
        let nickName = $("#nickName").val();
        if (username == null || nickName == null) {
            swal("不能为空");
        }
        let data = {username: username, nickName: nickName};
        $.ajax({
            url: "/admin/updateName",
            type: "post",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (data) {
                console.info(data);
                if (data.code === 1000) {
                    swal("恭喜您，修改成功!", {
                        icon: "success"
                    });
                    $("#nickName").val(nickName);
                    $(".d-block").text(nickName);
                } else {
                    swal("很遗憾，修改失败！", {
                        icon: "error"
                    });
                }
            }
        });
    }

    function updatePassword() {
        let pwd = $("#originalPassword").val();
        let newPwd = $("#newPassword").val();
        let data = {password: pwd, newPassword: newPwd};
        $.ajax({
            url: "/admin/updatePwd",
            type: "post",
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function (data) {
                console.info(data.msg);
                if (data.code === 1000) {
                    swal("恭喜您，修改成功!", {
                        icon: "success"
                    });
                    $("#originalPassword").val("");
                    $("#newPassword").val("");
                } else {
                    swal(data.msg, {
                        icon: "error"
                    });
                }
            }
        })
    }
</script>
</body>
</html>
